/*
 * @Description: 
 * @Author: Haor
 * @Date: 2022-02-22 08:56:32
 * @LastEditTime: 2022-03-28 13:48:33
 * @LastEditors: Haor
 */

import { camelToMiddleline } from './data'

/**
 * 元素是否滚动到最底部
 * @param {Element|String} el 需要检测的元素
 * @return {Boolean} true: 是，false: 否
 */
export const isScrollBottom = el => {
    el = typeof el === "string" ? document.querySelector(el) : el;
    return el ? el.scrollHeight - el.scrollTop === el.clientHeight : false;
};

/**
 * 内容是否超出省略
 * @param {Element} el
 */
export const isEllipsis = el => {
    return (
        el.scrollHeight !== el.offsetHeight || el.scrollWidth !== el.offsetWidth
    );
};

/**
 * 返回指定元素的生效样式
 * @param {Element} el
 * @param {String} attr
 */
export const getStyle = (el, attr) => {
    el = typeof el === 'string' ? document.querySelector(el) : el
    if (!el) return null
    return {
        left: el.offsetLeft,
        top: el.offsetTop,
        width: el.offsetWidth,
        height: el.offsetHeight,
        [attr]: el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el)[attr]
    }[attr]
}

/**
 * 自定义长按事件
 * @param {Element|String} el 元素
 * @param {Function} cb 长按后回调函数
 * @param {Number} time 长按事件（单位：秒）
 */
export const longLongPress = (function() {
    let maxTime = 2 * 1000
    let time = 0
    const handlerEvent = {
        // 开始触摸事件
        touchStart: (e) => {
            // 组织默认行为
            e.target.addEventListener('contextmenu', e => e.preventDefault(), false)

            // 开始计时
            time = Date.now()
        },

        // 移动事件
        touchMove: () => {
            console.log('move---')
            time = 0
        },

        // 触摸完毕事件
        touchEnd: (e, cb) => {
            if (Date.now() - time >= maxTime) {
                cb && cb(e.target)
            }
            time = 0;
        }
    }
    
    /**
     * 绑定事件
     * @param {Object} el
     * @param {Object} cb
     * @param {Object} time
     */
    return function bind(el, cb, time) {
        el = el instanceof Element ? el : document.querySelector(el)
        if (!el) return false
        maxTime = time * 1000 || 2 * 1000 //设置长按时间
        el.addEventListener('touchstart', handlerEvent.touchStart, false)
        el.addEventListener('touchmove', handlerEvent.touchMove, false)
        el.addEventListener('touchend', e => {
            handlerEvent.touchEnd(e, cb)
        }, false)
    }
})();

/**
 * 设置元素样式
 * @param {Element} el 
 * @param {Object} styleObj 
 * @return {Object}
 */
export const setStyle = (el, styleObj) => {
    if (!el) return
    const styleText = Object.keys(styleObj).reduce((pre, key) => {
        const styleText = `${camelToMiddleline(key)}:${styleObj[key]};`
        return (pre += styleText)
    }, '')
    el.style.cssText = styleText
    return {
        el,
        styleText
    }
}